<meta charset="UTF-8">
<div id="query-company">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.queryCustomer")}}</h3>
        <ul>
            <li>
                <i-input v-model.trim="queryParameter"></i-input>
            </li>
            <li>
                <i-button type="primary" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
        </ul>
        <div class="table-wraper">
            <i-table border :columns="columns" :height="taleHeight" :data="tableData" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div>

        <Modal v-model="modal" width="900" title="编辑分组">
            <div style="width:850px;margin:10px auto">
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("customer.customerName")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="companyname"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.organization")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="orgcode"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.registerDate")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <date-picker type="date" v-model="registerdate"></date-picker>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.legalPerson")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="jurdcperson"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.contacts")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="companyperson"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.contactNumber")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim.number="companyphone"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.phoneNumber")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim.number="alldayphone"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.aptitude")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="type">
                            <i-option v-for="item in operationList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.personNumber")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim.number="empcount"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.officeAddress")}} : &nbsp;</i-col>
                    <i-col span="20">
                        <i-input v-model.trim="officeaddr"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.registerAddress")}} : &nbsp;</i-col>
                    <i-col span="20">
                        <i-input v-model.trim="registeraddr"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("customer.remark")}} : &nbsp;</i-col>
                    <i-col span="20">
                        <i-input v-model.trim="remark"></i-input>
                    </i-col>
                </Row>

                <Row style="margin: 10px 0">
                    <i-col span="6" :offset="6">
                        <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                    <i-col span="6" :offset="1">
                        <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                    </i-col>
                </Row>
            </div>
            <div slot="footer" style="height:20px;"></div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#query-company",
            i18n: utils.getI18n(),
            data: {
                taleHeight: 300,
                modal: false,
                editDeviceIndex: null,
                queryTableData: [],
                loading: true,
                columns: [{
                    title: vRoot.$t("customer.customerName"),
                    key: 'companyname',
                }, {
                    title: vRoot.$t("customer.contacts"),
                    key: 'companyperson'
                }, {
                    title: vRoot.$t("customer.contactNumber"),
                    key: 'companyphone'
                }, {
                    title: vRoot.$t("customer.officeAddress"),
                    key: 'officeaddr'
                }, {
                    title: vRoot.$t("bgMgr.action"),
                    key: 'action',
                    width: 160,
                    render: function(h, params) {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function() {
                                        vueInstanse.editDeviceIndex = params.index;
                                        editObject = params.row;
                                        vueInstanse.setCompanyData();
                                        vueInstanse.modal = true;
                                        // vueInstanse.editCustomer(params.index);
                                    }
                                }
                            }, vRoot.$t("bgMgr.edit")),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: vRoot.$t("message.confirmDel")
                                },
                                on: {
                                    'on-ok': function() {
                                        vueInstanse.del(params.row);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, vRoot.$t("bgMgr.delete"))
                            ])
                        ]);
                    }
                }],
                currentIndex: 1,
                tableData: [],
                queryType: "companyname",
                queryParameter: "",
                queryList: [{
                    value: "companyname",
                    label: vRoot.$t("customer.customerName")
                }, {
                    value: "jurdcperson",
                    label: vRoot.$t("customer.legalPerson")
                }, {
                    value: "companyperson",
                    label: vRoot.$t("customer.contacts")
                }, ],
                recordsList: [],
                total: 0,
                delCustomerObj: {},

                companyname: "", //公司名称
                orgcode: "", //机构编号
                registerdate: null, //成立日期
                jurdcperson: "", // 法人
                companyperson: "", //企业联系人
                companyphone: "", //企业联系电话
                alldayphone: "", //24小时联系电话
                empcount: "", //员工数量
                officeaddr: "", //工作地址
                registeraddr: "", //注册地址
                remark: "", //备注
                type: "", // 运营级别
                operationList: [{
                    value: 1,
                    label: isZh ? '1级资质' : 'Level 1'
                }, {
                    value: 2,
                    label: isZh ? '2级资质' : 'Level 2'
                }, {
                    value: 3,
                    label: isZh ? '3级资质' : 'Level 3'
                }]

            },
            methods: {
                queryAllCompanyInfo: function(claaback) {
                    var url = myUrls.queryCompanyByCreater();
                    utils.sendAjax(url, {}, claaback)
                },
                doQueryAllCompanyInfo: function(resp) {
                    if (resp.status === 0) {
                        resp.records.forEach(function(record) {
                            record.companyperson ? "" : record.companyperson = record.jurdcperson;
                            record.pinYin = __pinyin.getPinyin(record.companyname);
                            record.firstLetter = __pinyin.getFirstLetter(record.companyname);
                        });
                        this.recordsList = resp.records;
                        this.total = this.recordsList.length;
                        this.tableData = this.recordsList.slice(0, 10);
                    }
                    this.loading = false;
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 184;
                },
                handlerClickQuery() {

                    var self = this;
                    var queryTableData = [];
                    var queryParameterLowerCase = this.queryParameter.toLowerCase();
                    if (!self.queryParameter) return;
                    this.recordsList.forEach(function(record) {
                        var companyname = record.companyname;
                        var jurdcperson = record.companyperson ? record.companyperson : record.jurdcperson;
                        if (
                            companyname.indexOf(self.queryParameter) != -1 ||
                            (jurdcperson && jurdcperson.indexOf(self.queryParameter) != -1) ||
                            record.pinYin.indexOf(queryParameterLowerCase) != -1 ||
                            record.firstLetter.indexOf(queryParameterLowerCase) != -1
                        ) {
                            queryTableData.push(record);
                        }
                    });

                    this.currentIndex = 1;
                    this.queryTableData = queryTableData;
                    this.tableData = this.queryTableData.slice(0, 10);
                    this.total = this.queryTableData.length;
                },

                del: function(delObj) {
                    var url = myUrls.deleteCompany();
                    var data = {
                        companyid: delObj.companyid
                    };
                    this.delCustomerObj = delObj;
                    utils.sendAjax(url, data, this.doDeleteCallback);
                },
                doDeleteCallback: function(resp) {
                    var me = this;
                    if (resp.status == 0) {
                        this.$Message.success(me.$t("message.deleteSucc"));

                        this.recordsList.forEach(function(item, index) {
                            if (item.companyid == me.delCustomerObj.companyid) {
                                me.$delete(me.recordsList, index);
                            }
                        });

                        this.tableData.forEach(function(item, index) {
                            if (item.companyid == me.delCustomerObj.companyid) {
                                me.$delete(me.tableData, index);
                            }
                        });

                        me.total = me.recordsList.length;
                        me.tableData = me.recordsList.slice(me.currentIndex - 1, 10);
                    } else {
                        this.$Message.error(resp.cause);
                    }
                    this.modal = false;
                },
                handleSubmit: function() {
                    var url = myUrls.editCompany(),
                        me = this;
                    var data = {
                        companyid: editObject.companyid
                    };
                    if (this.companyname !== "") {
                        data.companyname = this.companyname;
                    } else {
                        this.$Message.error(isZh ? "公司名称是必填的!" : "Company name is mandatory");
                        return;
                    }
                    this.orgcode != "" ? data.orgcode = this.orgcode : "";
                    this.companyphone != "" ? data.companyphone = this.companyphone : "";
                    this.registerdate != "" ? data.registerdate = new Date(this.registerdate).getTime() : "";
                    this.jurdcperson != "" ? data.jurdcperson = this.jurdcperson : "";
                    this.registeraddr != "" ? data.registeraddr = this.registeraddr : "";
                    this.alldayphone != "" ? data.alldayphone = this.alldayphone : "";
                    this.companyperson != "" ? data.companyperson = this.companyperson : "";
                    this.empcount != "" ? data.empcount = this.empcount : "";
                    this.empcount != "" ? data.empcount = this.empcount : "";
                    this.officeaddr != "" ? data.officeaddr = this.officeaddr : "";
                    this.remark != "" ? data.remark = this.remark : "";
                    this.type != "" ? data.type = this.type : "";
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            var newData = Object.assign(editObject, data);
                            newData.overduetimestr = data.registerdate ? DateFormat.longToDateTimeStr(data.registerdate, timeDifference) : 0;
                            me.tableData[me.editDeviceIndex] = newData;
                            utils.changeSingleItemData(me.recordsList, newData, 'companyid');
                            me.$Message.success(isZh ? "修改成功" : "Editorial success");
                        } else {
                            if (resp) {
                                if (resp.cause) {
                                    me.$Message.error(resp.cause);
                                }
                            } else {
                                me.$Message.error('编辑失败');
                            }
                        }
                    });
                },
                resetInfo: function() {
                    this.companyname = "";
                    this.orgcode = "";
                    this.companyphone = "";
                    this.companyperson = "";
                    this.registerdate = "";
                    this.jurdcperson = "";
                    this.alldayphone = "";
                    this.empcount = "";
                    this.empcount = "";
                    this.officeaddr = "";
                    this.remark = "";
                    this.type = "";
                    this.registeraddr = "";
                },
                setCompanyData: function() {
                    this.companyname = editObject.companyname;
                    this.orgcode = editObject.orgcode;
                    this.companyphone = editObject.companyphone;
                    this.registerdate = editObject.registerdate ? DateFormat.longToDateStr(editObject.registerdate, timeDifference) : null;
                    this.jurdcperson = editObject.jurdcperson;
                    this.alldayphone = editObject.alldayphone;
                    this.empcount = editObject.empcount;
                    this.officeaddr = editObject.officeaddr;
                    this.remark = editObject.remark;
                    this.type = editObject.type;
                    this.companyperson = editObject.companyperson;
                    this.registeraddr = editObject.registeraddr;
                },
            },
            mixins: [mixIn],
            mounted: function() {
                var me = this;
                this.queryAllCompanyInfo(this.doQueryAllCompanyInfo);
                this.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        });
    </script>
</div>